<template>
  <div class="dashboard-editor-container">
<!-- 调度统计 -->
    <panel-group :group-data="panelGroupData"/>

    <el-row style="margin-bottom: 10px">
      <el-col :span="12">
        <div>调度报表</div>
      </el-col>
      <el-col :span="12" style="text-align: right">
        <el-date-picker
          v-model="dateDuring"
          type="datetimerange"
          :shortcuts="shortcuts"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="YYYY-MM-DD HH:mm:ss"
          format="YYYY-MM-DD HH:mm:ss"
          :default-time="[
            new Date(2000, 1, 1, 0, 0, 0),
            new Date(2000, 1, 1, 23, 59, 59)
          ]"
        />
        <el-button style="margin-left: 10px;" type="primary" @click="getScheduleInfo">查询</el-button>
      </el-col>
    </el-row>

    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
    <!-- 折线图 -->
      <el-col :span="16">
        <div class="chart-wrapper">
          <line-chart :chart-data="lineChartData"/>
        </div>
      </el-col>
      <!-- 饼图 -->
      <el-col :span="8">
        <div class="chart-wrapper">
          <pie-chart :chart-data="pieCharData"/>
        </div>
      </el-col>

    </el-row>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import PanelGroup from './components/PanelGroup.vue'
import LineChart from './components/LineChart.vue'
import PieChart from './components/PieChart.vue'
import {getChartInfo} from '@/api/scheduler'
import qs from 'qs'

const lineChartData = ref({
  successData: [],
  failData: [],
  runningData: [],
  lineCharDates: []
})

const pieCharData = ref({
  jobSuccess: 0,
  jobFail: 0,
  jobRunning: 0
})

const dateDuring = ref([])

const panelGroupData = ref({
  jbobLogCount: null,
  jobInfoCount: null,
  executorCount: null
})

// 定义快捷选项
const shortcuts = [
  {
    text: '最近一周',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
      return [start, end]
    }
  },
  {
    text: '最近一个月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
      return [start, end]
    }
  },
  {
    text: '最近三个月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
      return [start, end]
    }
  }
]

// 计算默认时间范围
const timeDefault = computed(() => {
  const date = new Date()
  const defalutStartTime = date.getTime() - 7 * 24 * 3600 * 1000
  const defalutEndTime = date.getTime()
  const startDateNs = new Date(defalutStartTime)
  const endDateNs = new Date(defalutEndTime)

  const formatStart = `${startDateNs.getFullYear()}-${
    (startDateNs.getMonth() + 1) >= 10 ? (startDateNs.getMonth() + 1) : '0' + (startDateNs.getMonth() + 1)
  }-${startDateNs.getDate() >= 10 ? startDateNs.getDate() : '0' + startDateNs.getDate()} 00:00:00`

  const formatEnd = `${endDateNs.getFullYear()}-${
    (endDateNs.getMonth() + 1) >= 10 ? (endDateNs.getMonth() + 1) : '0' + (endDateNs.getMonth() + 1)
  }-${endDateNs.getDate() >= 10 ? endDateNs.getDate() : '0' + endDateNs.getDate()} 23:59:59`

  return [formatStart, formatEnd]
})

const getDashBoardInfo = async () => {
  try {
    const res = await getDashboardInfo()
    if (res.code === 200) {
      const { jobInfoCount, jobLogCount, executorCount } = res.content
      panelGroupData.value.jobInfoCount = jobInfoCount
      panelGroupData.value.jobLogCount = jobLogCount 
      panelGroupData.value.executorCount = executorCount
    }
  } catch (err) {
    console.log(err.message)
  }
}

const getScheduleInfo = async () => {
  const timeScope = {
    startDate: dateDuring.value[0],
    endDate: dateDuring.value[1]
  }
  try {
    const res = await getChartInfo(qs.stringify(timeScope))
    if (res.code === 200) {
      const {
        triggerCountRunningTotal,
        triggerCountSucTotal,
        triggerCountFailTotal,
        triggerDayList,
        triggerDayCountRunningList,
        triggerDayCountFailList,
        triggerDayCountSucList
      } = res.content

      lineChartData.value.lineCharDates = triggerDayList
      lineChartData.value.successData = triggerDayCountSucList
      lineChartData.value.failData = triggerDayCountFailList
      lineChartData.value.runningData = triggerDayCountRunningList

      pieCharData.value.jobRunning = triggerCountRunningTotal
      pieCharData.value.jobSuccess = triggerCountSucTotal
      pieCharData.value.jobFail = triggerCountFailTotal
    }
  } catch (err) {
    console.log(err.message)
  }
}

onMounted(() => {
  dateDuring.value = timeDefault.value
  // getDashBoardInfo()
  getScheduleInfo()
})
</script>

<style rel="stylesheet/scss" lang="scss" slot-scope>
  .dashboard-editor-container {
    padding: 32px;
    background-color: rgb(240, 242, 245);
    .chart-wrapper {
      background: #fff;
      padding: 16px 16px 0;
      margin-bottom: 32px;
    }
    .panel-group {
      margin-top: 0px;
    }
  }
</style>
